<template>
    <el-table :data="formattedData" style="width: 100%" border>
      <el-table-column
        v-for="(header, index) in headers"
        :key="index"
        :label="header"
        :prop="index.toString()"
        align="center"
      />
    </el-table>
  </template>
  
  <script lang="ts" setup>
  import { computed } from 'vue';
  import { defineProps } from 'vue';
  
  const props = defineProps({
    data: {
      type: Array,
      required: true,
    },
  });
  
  // 定义表格的列标题
  const headers = ['节','一', '二', '三', '四', '五', '六', '日'];
  
  // 格式化数据以适应 el-table 的结构
  const formattedData = computed(() => {
    return props.data.map((row, rowIndex) => {
      const formattedRow: Record<string, string> = {};
      row.forEach((cell, cellIndex) => {
        formattedRow[cellIndex.toString()] = cell;
      });
      return formattedRow;
    });
  });
  </script>
  
  <style scoped>
/* 设置行高和添加边框 */
.el-table .el-table__row {
  height: 50px; /* 固定行高 */
}

.el-table .el-table__cell {
  border: 1px solid #e0e0e0; /* 添加单元格边框 */
}

.el-table .el-table__header-wrapper th {
  border: 1px solid #e0e0e0; /* 表头单元格边框 */
}
  </style>